<template>
	<uv-popup ref="modal" :mode="mode" bgColor="transparent" :round="round" :closeable="closeable" :safeAreaInsetBottom="safeAreaInsetBottom" :closeOnClickOverlay="closeOnClickOverlay">
		<view class="popup-box ss-flex-col ss-row-between ss-p-x-48 ss-p-b-48 box-sizing" :style="{background:bgColor}">
			<image class="popup-icon" :src="`${sheep.$config.baseOssUrl}/static/bg/${bgName}.png`"></image>
			<view class="title ss-m-t-48">{{ title }}</view>
			<uv-gap height="18"></uv-gap>
			<view v-if="content" class="ss-p-x-28 fc-dark6 ss-font-28 ss-text-center">{{ content }}</view>
			<slot></slot>
			<uv-gap height="24"></uv-gap>
			<view v-if="showBtn" class="ss-flex ss-gap-24 ss-w-100">
				<button v-if="showCancel" @tap="onCancel" class="ss-reset-button cancel-btn">{{ cancelText }}</button>
				<z-button v-if="showConfirm" class="ss-w-100" height="88" @tap="confirm">{{ confirmText }}</z-button>
			</view>
		</view> 
		<view @tap="onCancel" class="ss-flex ss-row-center ss-m-t-32">
			<z-icon name="close-1" size="64rpx"></z-icon>
		</view>
	</uv-popup>
</template>  

<script setup>	
		import sheep from "@/sheep"
		const props = defineProps({
			modelValue:{
				type:Boolean,
				default:false
			},
			closeOnClickOverlay:{
				type:Boolean,
				default:false
			},
			bgName: {
				type:String,
				default:'cancel' 
			},
			showConfirm:{
				type:Boolean,
				default:true
			},
			showCancel:{
				type:Boolean,
				default:true
			},
			content:{
				type:String,
				default:''
			},
			userBg:{
				type:Boolean,
				default:true
			},
			mode:{
				type:String,
				default:'center' //center,left,right,top,bottom,middle,fullScreen,halfScreen
			},
			minHeight:{
				type:String,
				default:'400rpx'
			},
			title:{
				type:String,
				default:'操作提示'
			},
			confirmText:{
				type:String,
				default:'确定'
			},
			showBtn:{
				type:Boolean,
				default:true
			},	
			closeable:{
				type:Boolean,
				default:false
			},
			iconSize:{
				type:String,
				default:'100'
			},
			cancelText:{
				type:String,
				default:'取消'
			},
			bgColor:{
				type:String,
				default:"#fff"
			},
			safeAreaInsetBottom:{
				type:Boolean,
				default:false
			},
			confirmClose:{
				type:Boolean,
				default:true
			},
			round:{
				type:String,
				default:'40rpx'
			}
			
		})
		const emit = defineEmits(['update:modelValue','confirm','cancel'])
		const state = reactive({
			show:false
		})
		const modal = ref()
		watch(() => props.modelValue,(value) => {
			emit('update:modelValue',value)
			if(value) modal.value.open()
			else modal.value.close()
		})
		const onCancel = () => {
			emit('update:modelValue',false)
			emit('cancel')
		}  
		const confirm = () => {		
			// emit('update:modelValue',false)
			if(props.confirmClose) emit('update:modelValue',false)
			emit('confirm')
		}
</script>

<style lang="scss" scoped>	
	:deep(.uv-popup__content) {
		overflow: unset !important;
	}
	.popup-box {
		width: 600rpx;
		min-height:418rpx;
		border-radius: 40rpx;
		position: relative;
		.popup-icon {
			width: 200rpx;
			height: 200rpx;
			position: absolute;
			top: -100rpx;
			left: calc((100% - 200rpx) / 2);
		}
		.title {
			text-align: center;
			font-weight: 500;
			font-size: 32rpx;
			color: #222222;
		}
		.cancel-btn {
			height: 88rpx;
			width: 100%;
			background: #F6F7F8;
			color: #051433;
			border-radius: 20rpx;
		}
	}
</style>